<template>
    <section class="friend-item">
      <div class="inner">
          <div class="thumbs">
              <img :src="info.img" alt="thumbs">
          </div>
          <div class="details">
              <div class="float-left">
                  <p class="name">{{info.name}}</p>
                  <p class="tips">{{info.desc}}</p>
                  <p class="tips">{{info.location}}</p>
              </div>
              <div class="options">
                <span v-if="info.status === 1"><Icon type="md-add" /> 关注</span>
                <span v-if="info.status === 2"><Icon type="md-remove" /> 取消关注</span>
                <span><Icon type="ios-mail" /> 私信</span>
              </div>
          </div>
      </div>
    </section>
</template>

<script>
export default {
  name: 'FriendItem',
    props: {
        info: {
            type: Object,
            required: true
        }
    }
}
</script>

<style scoped lang="less">
  @import "../../style/style.less";
  .inner {
      border-bottom: 1px solid @border-color;
      padding: 10px 10px 12px 0;
      &:hover {
          background-color: #f5f5f5;
          >.details>.options {
              display: inline-block;
          }
      }
    &:after {
        display: block;
        clear: both;
        content: "";
        visibility: hidden;
        height: 0;
    }
      .thumbs, .details {
          float: left;
      }
      .thumbs {
          width: 65px;
          height: 65px;
          line-height: 1;
          font-size: 0;
          border-radius: 50%;
          overflow: hidden;
          margin: 0 30px;
          img {
              width: 100%;
              height: 100%;
          }
      }
      .details {
          width: calc(~'100% - 125px');
          &:after{
              display: block;
              clear: both;
              content: "";
              visibility: hidden;
              height: 0;
          }
          .options{
              height: 46px;
              line-height: 46px;
              display: inline-block;
          }
          .options  {
              float: right;
          }
          .name {
              color: @theme-color-dark;
              font-size: 16px;
          }
          .tips{
              color: #999;
              font-size: 14px;
          }
          .options {
              display: none;
            span{
                display: inline-block;
                height: 24px;
                line-height: 24px;
                color: #fff;
                border-radius: 4px;
                background-color: @theme-color-dark;
                padding: 0 6px;
                margin-right: 10px;
                cursor: pointer;
            }
          }
      }
  }
</style>
